<template>
  <div>
    <!-- banner -->

    <div class="banner">
      <h1 class="banner-title">院校</h1>
    </div>
    <!--    <div class="banner">
          <el-carousel height="400px">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.courseCover" width="100%" @click="coursePlay(item)">
            </el-carousel-item>
          </el-carousel>
        </div>-->
    <v-card class="course-container">
      <!-- 搜索     -->
      <div class="group">
        <svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
          <g>
            <path
                d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path>
          </g>
        </svg>
        <input placeholder="Search" type="search" class="input" v-model="keywords" @keyup.13="listSchool">
        <button @click="listSchool" style="width: 10em;margin-left: 1em">
          <div class="svg-wrapper-1">
            <div class="svg-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="none" d="M0 0h24v24H0z"></path>
                <path fill="currentColor"
                      d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>
              </svg>
            </div>
          </div>
          <span>搜索</span>
        </button>
      </div>
      <div style="padding: 20px">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="listSchool2">
          <el-menu-item index="">全部</el-menu-item>
          <el-menu-item
              v-for="item of provinceList"
              :key="item.id"
              :index="item.name"
          >{{ item.name }}
          </el-menu-item
          >
        </el-menu>
      </div>
      <v-row>
        <v-col :md="3" v-for="item of schoolList" :key="item.id">
          <div class="album-item" @click="coursePlay(item)">
            <v-img class="album-cover" :src="item.img"/>
            <div class="album-wrapper">
              <div class="album-name">{{ item.name }}</div>
              <div class="album-desc">创建时间：{{ item.createTime }}</div>
              <div class="album-desc">简介：{{ item.content }}</div>
              <div class="album-category">{{ item.address }}</div>
              <span class="album-count"> {{ item.province }}</span>
              <span class="album-rate">{{ item.major }}</span>
            </div>
          </div>
        </v-col>
      </v-row>
      <v-pagination
          color="#00C4B6"
          v-model="current"
          :length="Math.ceil(count / 10)"
          total-visible="7"
      />
    </v-card>
  </div>
</template>

<script>
export default {
  created() {
    this.listSchool();
  },
  data: function () {
    return {
      schoolList: [],
      provinceList: [
          {id:'1',name:'北京'},
          {id:'2',name:'上海'},
          {id:'3',name:'天津'},
          {id:'4',name:'重庆'},
          {id:'5',name:'黑龙江'},
          {id:'6',name:'辽宁'},
          {id:'7',name:'吉林'},
          {id:'8',name:'河北'},
          {id:'9',name:'内蒙古'},
          {id:'10',name:'陕西'},
          {id:'11',name:'山西'},
          {id:'12',name:'甘肃'},
          {id:'13',name:'宁夏'},
          {id:'14',name:'新疆'},
          {id:'15',name:'西藏'},
          {id:'16',name:'青海'},
          {id:'17',name:'四川'},
          {id:'18',name:'云南'},
          {id:'19',name:'贵州'},
          {id:'20',name:'湖南'},
          {id:'21',name:'湖北'},
          {id:'22',name:'河南'},
          {id:'23',name:'山东'},
          {id:'24',name:'安徽'},
          {id:'25',name:'江苏'},
          {id:'26',name:'浙江'},
          {id:'35',name:'江西'},
          {id:'27',name:'广东'},
          {id:'28',name:'广西'},
          {id:'29',name:'福建'},
          {id:'30',name:'台湾'},
          {id:'31',name:'香港'},
          {id:'32',name:'澳门'},
          {id:'33',name:'海南'},
          {id:'34',name:'海外'}
      ],
      current: 1,
      size: 10,
      isDelete: 0,
      count: 0,
      keywords: null,
      activeIndex: '',
      bannerList: [],
    };
  },
  methods: {
    listSchool() {
      this.axios.get("/api/school/list", {
        params: {
          current: this.current,
          size: this.size,
          keywords: this.keywords,
        }
      }).then(({data}) => {
        this.schoolList = data.data.recordList;
        this.count = data.data.count;
      });
    },
    listSchool2(val) {
      this.axios.get("/api/school/list", {
        params: {
          current: this.current,
          size: this.size,
          keywords: this.keywords,
          province: val
        }
      }).then(({data}) => {
        this.schoolList = data.data.recordList;
        this.count = data.data.count;
      });
    },
    coursePlay(item) {
      // this.$router.push({path: "/school/" + item.id});
      window.open(item.url)
    }
  },
  watch: {
    current(value) {
      this.axios.get("/api/school/list", {
        params: {
          current: value,
          size: this.size,
        }
      }).then(({data}) => {
        this.schoolList = data.data.recordList;
        this.count = data.data.count;
      });
    }
  },

};
</script>

<style scoped>
.album-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #000;
  border-radius: 0.5rem !important;
}

.album-cover {
  position: relative;
  max-width: none;
  width: calc(100% + 1.25rem);
  height: 250px;
  opacity: 0.8;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-10px, 0, 0);
  object-fit: cover;
}

.album-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.8rem 2rem;
  color: #fff !important;
}

.album-item:hover .album-cover {
  transform: translate3d(0, 0, 0);
  opacity: 0.4;
}

.album-item:hover .album-name:after {
  transform: translate3d(0, 0, 0);
}

.album-item:hover .album-desc {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0);
}

.album-name {
  font-weight: bold;
  font-size: 1.25rem;
  overflow: hidden;
  padding: 0.7rem 0;
  position: relative;
}

.album-name:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: "";
  transition: transform 0.35s;
  transform: translate3d(-101%, 0, 0);
}

.album-desc {
  margin: 0;
  padding: 0.4rem 0 0;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(100%, 0, 0);
}

.album-category {
  font-size: 1rem;
  position: absolute;
  right: 4rem;
  bottom: 0.7rem;
}

.album-count {
  font-size: 1rem;
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
}

.album-rate {
  color: #f2cc60;
  font-size: 2em;
  font-weight: bolder;
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
}

.course-container {
  animation: main 1s;
  max-width: 100%;
  padding: 50px 40px;
  margin: 380px auto 40px auto;
}

/* From uiverse.io by @alexruix */
.group {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
  max-width: 30em;
  margin-bottom: 20px;
}

.input {
  width: 100%;
  height: 40px;
  line-height: 28px;
  padding: 0 1rem;
  padding-left: 2.5rem;
  border: 2px solid transparent;
  border-radius: 8px;
  outline: none;
  background-color: #f3f3f4;
  color: #0d0c22;
  transition: .3s ease;
}

.input::placeholder {
  color: #9e9ea7;
}

.input:focus, input:hover {
  outline: none;
  border-color: rgba(234, 76, 137, 0.4);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
}

.icon {
  position: absolute;
  left: 1rem;
  fill: #9e9ea7;
  width: 1rem;
  height: 1rem;
}

/* From uiverse.io by @adamgiebl */
button {
  font-family: inherit;
  font-size: 15px;
  background: royalblue;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(5em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}


</style>
